<template>
	<view class="content">
		<view class="main">
			<view class="choseimg">
				<image class="img" :src="chosedImgUrl" mode="aspectFit"></image>
				<button class="btnn" type="default" @click="chooseImg">上传图片</button>
			</view>
			<view class="scan" @click="scan">
				<u-icon name="scan" color="#2979ff" size="34"></u-icon>
			</view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column inp">
					<view class="title"></view>
					<input class="uni-input inpu" maxlength="20" name="bookName" placeholder="请输入书籍名称" />
				</view>
				<view class="uni-form-item uni-column inp">
					<view class="title"></view>
					<input class="uni-input inpu" maxlength="13" :value="IBSN" name="IBSN"
						placeholder="扫描书籍条形码获取ISBN" />
				</view>
				<view class="uni-form-item uni-column inp">
					<view class="title"></view>
					<input class="uni-input inpu" name="price" maxlength="9" placeholder="请输入定价" />
				</view>
				<view class="uni-form-item uni-column inp">
					<view class="title"></view>
					<input class="uni-input inpu" name="info" maxlength="40" placeholder="请输入描述信息" />
				</view>
				<view class="uni-form-item uni-column pull">
					<picker @change="bindPickerChange" :range="array">
						<label>书籍种类：</label>
						<label class="bounce">{{array[index]}}</label>
					</picker>
				</view>
				<view class="uni-btn-v btns">
					<button class="btn" form-type="submit">发布书籍</button>
					<button class="btn" type="default" form-type="reset">重置信息</button>
				</view>
			</form>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				bookName: '',
				IBSN: '',
				price: '',
				chosedImgUrl: '',
				array: ["教科书", "专业相关书籍", "课外阅读"],
				index: 0,
			}
		},
		methods: {
			scan() {
				uni.scanCode({
					scanType: ['barCode'],
					success: (res) => {
						this.IBSN = res.result
						// console.log('条码内容：' + res.result);
					}
				});
			},
			formSubmit: function(e) {
				let token = uni.getStorageSync('token')
				let formdata = e.detail.value
				let typeid = Number(this.index) + Number(1)
				let bookName = formdata.bookName
				let IBSN = formdata.IBSN
				if (IBSN.length != 13) {
					uni.showToast({
						title: "IBSN格式不正确!",
						icon: "error"
					})
					return;
				}
				let price = Number(formdata.price)
				let info = formdata.info
				let imgUrl = this.chosedImgUrl
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata) + typeid,
				// 	showCancel: false
				// });
				if (!token) {
					uni.showToast({
						title: "请先登录!",
						icon: "error"
					})
				} else {
					let BaseUrl = getApp().globalData.BaseUrl
					uni.uploadFile({
						url: BaseUrl + '/saleBook/add',
						filePath: imgUrl,
						method: "POST",
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							'token': token
						},
						formData: {
							bookName: bookName,
							IBSN: IBSN,
							price: price,
							typeId: typeid,
							bookInfo: info
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log(data)
							if (data.code == 200) {
								uni.showToast({
									title: "发布成功!"
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '../index/index',
									})
								}, 1000)

							} else {
								uni.showToast({
									title: "发布失败!",
									icon: "error"
								})
							}
						}
					})
				}
			},
			formReset: function(e) {
				// console.log('清空数据')
				this.chosedImgUrl = ''
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// console.log(res)
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							wx.compressImage({
								src: filePath,
								quality: 20,
								success: (ress) => {
									this.chosedImgUrl = ress.tempFilePath
								}
							})							
						}
					}
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value
				this.jg = this.array[this.index]
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		background-color: #E1FFFF;
		position: relative;

	}

	.scan {
		width: 80upx;
		position: relative;
		left: 30upx;
		top: -100upx;
	}

	.inp {
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
		margin-left: 30upx;
		margin-right: 30upx;
		border-bottom: solid 1upx #888;
		height: 45upx;
		line-height: 45upx;

		.inpu {
			width: 90%;
			padding-left: 10upx;
		}
	}

	.pull {
		margin: 20upx 40upx;

		.bounce {
			font-size: 32upx;
			padding: 5upx;
			border: 1px black solid;
			border-radius: 10upx;
		}
	}

	.btns {
		display: flex;
		// margin-top: 80upx;
	}

	.main {
		width: 90%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 30upx;
		box-shadow: 0 0 10upx #888;
		height: 1100upx;
		position: relative;
		top: 50upx;

		.img {
			margin: 20upx 150upx;
			border-radius: 30upx;
			box-shadow: 0 0 5upx #888;
			overflow: hidden;
			width: 375upx;
			max-height: 450upx;
		}

		.btnn {
			width: 235upx;
			position: relative;
			// box-shadow: 0 0 1upx #888;
		}
	}
</style>
